<template>
  <section class="card-container">
    <div class="card-header-container">
      <h3 class="card-header">
        <span class="header">{{ title }}</span>
      </h3>
      <slot name="rightBtn"></slot>
    </div>

    <div class="card-content">
      <slot></slot>
    </div>
  </section>
</template>

<script lang="ts" setup>
  defineProps({
    title: {
      type: String,
      default: '',
    },
  });
</script>

<style lang='scss' scoped>
  .card-container{
    .card-header-container{
      display: flex;
      align-items: center;

      .card-header{
        display: flex;
        flex: 1;
        align-items: center;
        margin-left: 4px;
        font-weight: 600;
        font-size: 16px;
        line-height: 1;
      }

      &:before{
        display: inline-block;
        width: 4px;
        height: 14px;
        background: #007AF5;
        border-radius: 2px;
        content: '';
      }
    }
  }
</style>
